<template>
  <view class="container">
	  <view>
		  <text class="title_bar">查询用户</text>
	  </view>

	<view>
		<u--form>
			<u-form-item
					 label="姓名"
					        prop="username"
					        borderBottom
					        ref="item1"
							style="margin-right: 10px;"
			>
				<u--input
						 v-model="queryParams.userName"
						            border="none"
						            placeholder="请输入姓名"
									style="margin-left: 10px;"
				></u--input>
			</u-form-item>
		<u-form-item
		    label="手机号  "
		    prop="phonenumber"
		    borderBottom
		    ref="item2"
		    style="white-space: nowrap; margin-right: 10px;"
		>
		    <u--input
		        v-model="queryParams.phonenumber"
		        border="none"
		        placeholder="请输手机号"
		        style="margin-left: 10px;"
		    ></u--input>
		</u-form-item>

		</u--form>
	</view>

			
			<view style="display: flex; justify-content: center;margin-top: 10px;">
			    <u-button style="width: 100px; height: 30px; line-height: 30px;background-color: gold" @click="searchUsers">搜索</u-button>
			    <u-button style="width: 100px; height: 30px; line-height: 30px;" @click="resetSearch">重置</u-button>
			    <u-button type="primary" style="width: 100px; height: 30px; line-height: 30px;" @click="addUser">添加</u-button>
			</view>

    <!-- 用户列表 -->
    <view class="user-list">
      <view class="list-header">
        
        <text>用户名</text>
        <text>手机号</text>
        <text>闪付次数</text>
   
        <text>操作</text>
      </view>
      
      <view class="list-item" v-for="(user, index) in users" :key="index">
	<view class="checkbox-cell">
        <!-- <checkbox :value="user.selected" @change="toggleSelection(index)" /> -->
      </view>
        <text>{{ user.userName }}</text>
        <text style="margin-left: 20px;">{{ user.phonenumber }}</text>
        <text style="margin-left: 20px;">{{ user.userName }}</text>
       
        <view class="actions">
<view>
	<u-button type="primary" style="width: 10px;margin: 1px;" size="small"  @click="shouquan(user)">授权</u-button>
	
</view>
 <view>
	 <u-button type="primary" style="width: 10px; margin: 1px;" size="small"  @click="editUser(user)">详情</u-button>
	 <u-button style="width: 10px;margin: 1px;" type="error"  size="small" @click="deleteUser(user)">删除</u-button>
 </view>
		  
		  
        </view>
      </view>
    </view>

    <!-- 底部分页区域 -->
    <view class="pagination">
    
       <span style="margin-left: 10px;"></span>
	    <button 
	       class="custom-button" 
	       type="primary" 
	       size="small" 
	       @click="previousPage" 
	      :disabled="currentPage <= 1"
	     >
	       上一页
	     </button>
	     <text>共{{ total }}条</text>
		  <text style="margin-left: 5px;">第{{ currentPage }}页</text>
		 <button
		 
		    class="custom-button" 
		    type="primary" 
		    size="small" 
		    @click="nextPage" 
		    :disabled="currentPage >= totalPages"
		  >
		    下一页
		  </button>

		

    </view>
  </view>
</template>

<script>
import * as userAPI from '@/api/system/user.js';

export default {
  data() {
    return {
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 5,
        userName: undefined,
        phonenumber: undefined,
      },
      search: {
        userName: '',
        phone: '',
      },
      users: [],
      total: 0,
      currentPage: 1,
      pageSize: 5,
    };
  },
  created() {
    this.searchUsers();
  },
  methods: {
    searchUsers() {
      userAPI.listUser(this.queryParams).then(res => {
        this.total = res.total;
        this.users = res.rows;
      });
    },
    resetSearch() {
      this.queryParams = {
        userName: '',
        phone: '',
        pageNum: 1,
        pageSize: 5,
      };
      this.searchUsers();
    },
    editUser(user) {
      uni.showToast({
        title: `修改用户: ${user.userName}`,
        icon: 'none'
      });
    },
	
	shouquan(user) {
	  uni.navigateTo({
	    url: `/pages/home/admin/user/shouquan?phonenumber=${user.phonenumber}&username=${user.userName}`,
	  });
	},
    addUser() {
      uni.navigateTo({
        url: '/pages/home/admin/user/adduser',
      });
    },
    deleteUser(user) {
      uni.showModal({
        title: `删除用户: ${user.userName}`, // 使用反引号包裹模板字符串
        content: '是否确认删除该用户？',
        success: (res) => {
          if (res.confirm) {
            console.log('用户点击确定');
            userAPI.delUser(user.userId).then(res => {
              uni.showToast({
                title: '删除成功',
                icon: 'success'
              });
              this.searchUsers();
            });
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        }
      });
    },
    // 分页控制
    previousPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
        this.queryParams.pageNum = this.currentPage;
        this.searchUsers();
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
        this.queryParams.pageNum = this.currentPage;
        this.searchUsers();
      }
    },
    jumpToPage() {
      const page = parseInt(this.queryParams.pageNum);
      if (page > 0 && page <= this.totalPages) {
        this.currentPage = page;
        this.queryParams.pageNum = this.currentPage;
        this.searchUsers();
      } else {
        uni.showToast({
          title: '页码无效',
          icon: 'none'
        });
      }
    },
    validatePage() {
      const page = parseInt(this.queryParams.pageNum);
      if (page < 1) {
        this.queryParams.pageNum = 1;
      } else if (page > this.totalPages) {
        this.queryParams.pageNum = this.totalPages;
      }
      this.currentPage = this.queryParams.pageNum;
    }
  },
  computed: {
    totalPages() {
      return Math.ceil(this.total / this.pageSize);
    }
  }
}
</script>



<style scoped>
	.checkbox-cell {
	  width: 10px; /* 设置复选框单元格宽度 */
	}
	.checkbox-cell checkbox {
	  transform: scale(0.7); /* 调整复选框大小 */
	}
.title_bar {
    text-align: center; /* 水平居中 */
    display: block; /* 使文本块级显示 */
	font-weight: bold; /* 加粗 */
	margin-bottom: 5%;
	color: dodgerblue;
}
.container {
  padding: 15px;
}

.input {
  flex: 1 1 auto; /* 自动适应宽度 */
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  height: 0px; /* 调整为较小高度 */
  box-sizing: border-box; /* 包括padding和border在内 */
}

.search-bar {
  display: flex;
  justify-content: center;
  gap: 10px; /* 保持按钮间距小 */
  flex-wrap: wrap;
  margin-bottom: 10px; /* 缩小底部间距 */
}

.input {
  flex: 1 1 200px; /* 允许缩放，最低宽度200px */
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
  height: 30px; /* 增加高度 */
}
.picker_page {
  flex: 1 1 200px; /* 允许缩放，最低宽度200px */
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
  height: 10px; /* 增加高度 */
}


.picker_page {
  display: flex;
  align-items: center;
}

.search-btn, .reset-btn {
  width: calc(50% - 10px); /* 与输入框同宽 */
  padding: 8px 0; /* 减小按钮高度 */
  margin-top: 5px; /* 减小顶部空间 */
  margin-left: 5px; /* 增加按钮之间的空间 */
 
}
.custom-button {
  white-space: nowrap; /* 防止换行 */
  font-size: 12px; /* 调整字体大小 */
  margin-left: 20px;
}
.custom-button-jump{
	{
	  white-space: nowrap; /* 防止换行 */
	  font-size: 10px; /* 调整字体大小 */
	  margin-left: 1px;
	}
}
.search-btn:hover, .reset-btn:hover {
  background-color: #104E8B; /* 增加按钮悬停效果 */
}

.user-list {
  margin-top: 20px;
}

.list-header, .list-item {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #ddd;
}
.list-header text,
.list-item text {
  flex: 1;
  text-align: center;  /* 居中 */
  width: 25%;  /* 为每一列设置固定宽度 */
  padding: 0 5px;
  font-size: 14px;
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
}

.list-header {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #ddd;
  text-align: center;  /* 居中显示 */
  font-weight: bold;
  background-color: #f5f5f5;
}

.list-item text {
  flex: 1;
  text-align: center;  /* 居中显示 */
  padding: 0 5px;
  font-size: 14px;
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
}

.actions {
  flex: 1.5;
  display: flex;
  justify-content: center;
  text-align: center;  /* 确保操作项也居中 */
  align-items: center;
  color: blue;
  margin-left: 10px;
}

.actions span {
  cursor: pointer;
  margin-left: 5px;
}

.pagination {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 20px;
}

.page-input {
  width: 50px;
  margin: 1 10px;
  padding: 5px;
  border: 1px solid dimgray;
  text-align: center;
}
</style>
<style scoped>
	.checkbox-cell {
	  width: 10px; /* 设置复选框单元格宽度 */
  
}
.actions span{
	margin-left: 5px;
}


.pagination {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 20px;
}

.page-input {
  width: 50px;
  margin: 1 10px;
  padding: 5px;
  border: 1px solid dimgray;
  text-align: center;
}
</style>

